<template>
  <div class="main">
    <keep-alive>
      <router-view v-if="keepAlive" />
    </keep-alive>
    <router-view v-if="!keepAlive" />
    <Component
      v-if="!keepAlive"
      v-show="componentByPathName !== null"
      :is="componentByPathName"
    />
  </div>
</template>

<script>
  export default {
    name: "RouteView",
    data() {
      return {
        pathNameMap: {
          'f01': () => import('../../views/f01/F01.vue'),
          'f02': () => import('../../views/f02/F02.vue'),
          'f03': () => import('../../views/f03/F03.vue'),
          'f04': () => import('../../views/f04/F04.vue')
        },
        componentByPathName: null
      }
    },
    computed: {
      keepAlive() {
        return this.$route.meta.keepAlive
      }
    },
    watch: {
      '$route.name': {
        handler(val) {
          this.getComponentByRouteName(val)
        }
      }
    },
    mounted() {
      this.getComponentByRouteName(this.$route.name)
    },
    methods: {
      getComponentByRouteName(name) {
        const component = this.pathNameMap[name]
        this.componentByPathName = component ? component : null
      }
    }
  }
</script>